<template>
	<view>
		<!-- 头部背景图 -->
		<view class="top">
		</view>
		<!-- 热租手机 -->
		<view class="hotRentPhone">
			<view class="hotRentgGoodThing-box">
				<view class="hotRentProduct-top pl40 " v-for="(item,index) in hotRentPhoneTabList " :key="index">
					<view class="rentProduct" @tap="goProduct" :data-id="item.itemId">
						<!-- 左侧展示产品图 -->
						<image :src="item.image" mode="scaleToFill" class="left-img" 
							lazy-load="true"></image>
						<!-- 右侧展示产品名字 -->
						<view class="rentProduct-right ml10 cX">
							<view class="ml10 common-right">
								<view class="cX">
									<image src="https://oss.microzuji.com/web/activity/first_month/T2.png"
										mode="scaleToFill" style="width: 90rpx;height: 32rpx;" lazy-load="true"></image>
									<view class="product-tit b">
										{{item.name}}
									</view>
								</view>
								<image src="https://oss.microzuji.com/web/activity/first_month/T1.png"
									mode="scaleToFill" style="width: 180rpx;height: 140rpx;margin-left: 80rpx;"
									lazy-load="true">
								</image>
								<image src="https://oss.microzuji.com/web/activity/first_month/A1.png"
									mode="scaleToFill"
									style="width: 180rpx;height: 100rpx;margin-left: 70rpx;margin-top: 6rpx;"
									lazy-load="true">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热租手机产品列表 -->
		<view class="hotRentList">
			<view class="hotRentItem mt20" v-for="(item,index) in hotRentPhoneProductList" :key="index"
				@tap="goProduct" :data-id="item.itemId">
				<view class="cXY" style="height: 60%;">
					<!-- 产品图 -->
					<image :src="item.image" mode="scaleToFill" style="width:180rpx;height: 180rpx;" lazy-load="true">
					</image>
				</view>
				<view class="mt10" style="height: 38%;padding-top: 5rpx;">
					<view class="cX pl20 mt10">
						<image src="https://oss.microzuji.com/web/activity/first_month/T2.png" mode="scaleToFill"
							style="width: 60rpx;height: 30rpx;" lazy-load="true"></image>
						<view class="product-tit1 b">
							{{item.name}}
						</view>
					</view>
					<view class="tc mt10">
						<image src="https://oss.microzuji.com/web/activity/first_month/A2.png" mode="scaleToFill"
							style="width: 190rpx;height: 44rpx;" lazy-load="true"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 热租好物 -->
		<view class="mt60">
			<view class="hotRentgGoodThing">
				<view class="hotRentProduct-box">
					<view class="hotRentProduct-top pl40" v-for="(item,index) in hotRentPhoneTabList " :key="index">
						<view class="rentProduct" @tap="goProduct" :data-id="item.itemId">
							<!-- 左侧展示产品图 -->
							<image :src="item.image" mode="scaleToFill" class="left-img" 
								lazy-load="true"></image>
							<!-- 右侧展示产品名字 -->
							<view class="rentProduct-right ml10 cX">

								<view class="ml10 common-right" >
									<view class="cX">
										<image src="https://oss.microzuji.com/web/activity/first_month/T2.png"
											mode="scaleToFill" style="width: 90rpx;height: 32rpx;" lazy-load="true">
										</image>
										<view class="product-tit b">
											{{item.name}}
										</view>
									</view>
									<image src="https://oss.microzuji.com/web/activity/first_month/T1.png"
										mode="scaleToFill" style="width: 180rpx;height: 140rpx;margin-left: 80rpx;"
										lazy-load="true">
									</image>
									<image src="https://oss.microzuji.com/web/activity/first_month/A1.png"
										mode="scaleToFill"
										style="width: 180rpx;height: 100rpx;margin-left: 70rpx;margin-top: 6rpx;"
										lazy-load="true">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 热租好物产品列表 -->
			<view class="hotRentList ">
				<view class="hotRentItem mt20" v-for="(item,index) in hotRentGoodThingsProductList" :key="index"
					@tap="goProduct" :data-id="item.itemId">
					<view class="cXY" style="height: 60%;">
						<!-- 产品图 -->
						<image :src="item.image" mode="scaleToFill" style="width: 180rpx;height: 180rpx;"
							lazy-load="true"></image>
					</view>
					<view class="mt10" style="height: 38%;padding-top: 5rpx;">
						<view class="cX pl20 mt10">
							<image src="https://oss.microzuji.com/web/activity/first_month/T2.png" mode="scaleToFill"
								style="width: 60rpx;height: 30rpx;" lazy-load="true"></image>
							<view class="product-tit1 b">
								{{item.name}}
							</view>
						</view>
						<view class="tc mt10">
							<image src="https://oss.microzuji.com/web/activity/first_month/A2.png" mode="scaleToFill"
								style="width: 190rpx;height: 44rpx;" lazy-load="true"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热租电脑 -->
		<view class="mt60">
			<view class="hotRentComputer">
				<view class="hotRentComputer-box">
					<view class="hotRentProduct-top pl40 " v-for="(item,index) in hotRentComputerTabList " :key="index">
						<view class="rentProduct" @tap="goProduct" :data-id="item.itemId">
							<!-- 左侧展示产品图 -->
							<image :src="item.image" mode="scaleToFill" class="left-img" 
								lazy-load="true"></image>
							<!-- 右侧展示产品名字 -->
							<view class="rentProduct-right ml10 cX">
								<view class="ml10 common-right" >
									<view class="cX">
										<image src="https://oss.microzuji.com/web/activity/first_month/T2.png"
											mode="scaleToFill" style="width: 90rpx;height: 32rpx;" lazy-load="true">
										</image>
										<view class="product-tit b">
											{{item.name}}
										</view>
									</view>
									<image src="https://oss.microzuji.com/web/activity/first_month/T1.png"
										mode="scaleToFill" style="width: 180rpx;height: 140rpx;margin-left: 80rpx;"
										lazy-load="true">
									</image>
									<image src="https://oss.microzuji.com/web/activity/first_month/A1.png"
										mode="scaleToFill"
										style="width: 180rpx;height: 100rpx;margin-left: 70rpx;margin-top: 6rpx;"
										lazy-load="true">
									</image>
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
			<!-- 热租电脑产品列表 -->
			<view class="hotRentList">
				<view class="hotRentItem mt20" v-for="(item,index) in hotRentComputerProductList" :key="index"
					@tap="goProduct" :data-id="item.itemId">
					<view class="cXY" style="height: 60%;">
						<!-- 产品图 -->
						<image :src="item.image" mode="scaleToFill" style="width: 180rpx;height: 180rpx;"
							lazy-load="true"></image>
					</view>
					<view class="mt10" style="height: 38%;padding-top: 5rpx;">
						<view class="cX pl20 mt10">
							<image src="https://oss.microzuji.com/web/activity/first_month/T2.png" mode="scaleToFill"
								style="width: 60rpx;height: 30rpx;" lazy-load="true"></image>
							<view class="product-tit1 b">
								{{item.name}}
							</view>
						</view>
						<view class="tc mt10">
							<image src="https://oss.microzuji.com/web/activity/first_month/A2.png" mode="scaleToFill"
								style="width: 190rpx;height: 44rpx;" lazy-load="true"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 更多福利 -->
		<view class="moreWelfare tc mt60" @tap="goMore">
			<image src="https://oss.microzuji.com/web/activity/first_month/T4.png" mode="widthFix"
				style="width: 570rpx;" lazy-load="true"></image>
		</view>
		<!-- 三个图标 -->
		<view class="mt40">
			<view class="three-box">
				<view class="common-logo mt20">
					<!-- 正品保障 -->
					<image src="https://oss.microzuji.com/web/activity/first_month/T5.png" mode="scaleToFill"
						style="width: 100%;height: 100%;" lazy-load="true"></image>
				</view>
				<view class="common-logo mt20">
					<!-- 安心售后 -->
					<image src="https://oss.microzuji.com/web/activity/first_month/T6.png" mode="scaleToFill"
						style="width: 100%;height: 100%;" lazy-load="true"></image>
				</view>
				<!-- 快速配 -->
				<view class="common-logo mt20">
					<image src="https://oss.microzuji.com/web/activity/first_month/T7.png" mode="scaleToFill"
						style="width: 100%;height: 100%;" lazy-load="true"></image>
				</view>
			</view>
		</view>
		<!-- 用心服务│品质保障│售后无忧 -->
		<view class="mt100 tc">
			<image src="https://oss.microzuji.com/web/activity/first_month/Z1.png" mode="widthFix"
				style="width: 570rpx;" lazy-load="true"></image>
		</view>
		<!-- 回到顶部 -->
		<view class="tc mt30" @tap="goTop">
			<image src="https://oss.microzuji.com/web/activity/first_month/A3.png" mode="heightFix"
				style="height: 70rpx;" lazy-load="true"></image>
		</view>
	</view>
</template>


<script>
	import {
		yiYuanActivity
	} from '../../api/index.js'
	export default {
		data() {
			return {
				hotRentPhoneTabList: [], //热租手机
				hotRentPhoneProductList: [], //热租手机产品列表
				hotRentGoodThingsTabList: [], //热租好物
				hotRentGoodThingsProductList: [], //热租好物产品列表
				hotRentComputerTabList: [], //热租电脑
				hotRentComputerProductList: [], //热租电脑产品列表
			}
		},
		onLoad() {
			this.yiYuanActivity()
		},
		methods: {
			//监听页面滚动
			onPageScroll(e) {
				if (e.scrollTop > 160) {
					uni.setNavigationBarColor({
						backgroundColor: '#90CCF0',
					})
				}
				if (e.scrollTop === 0) {
					uni.setNavigationBarColor({
						backgroundColor: '#2789F4',
					})
				}
			},
			// 去详情页
			goProduct(e) {
				// wx.$onTo(
				// 	`/pages/product/product?productId=${e.target.dataset.id}`
				// )
				wx.navigateTo({
					url:'/pages/product/product?productId'+e.target.dataset.id
				})
			},
			// 去更多
			goMore() {
				// wx.navigateTo(
				// 	url:`/pages/index/index`
				// )
				wx.navigateTo({
					url: '/pages/index/index'
				})
			},
			// 返回顶部
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration: 300 // 滚动动画的时长
				})
			},
			yiYuanActivity() {
				yiYuanActivity({
					method: 'GET',
					data: {}
				}).then(res => {
					if (res.statusCode === 200) {
						console.log(res.data.data.info.tabList, "res.data")
						let arrList = res.data.data.info.tabList
						this.hotRentPhoneTabList = arrList[0].productList.slice(0,2)
						this.hotRentPhoneProductList = arrList[1].productList
						this.hotRentGoodThingsTabList = arrList[2].productList.slice(0,2)
						this.hotRentGoodThingsProductList = arrList[3].productList
						this.hotRentComputerTabList = arrList[4].productList.slice(0,2)
						this.hotRentComputerProductList = arrList[5].productList
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #8FCCF0;
		padding-bottom: 60rpx;
	}
</style>
<style scoped>
	.top {
		height: 60vh;
		width: 100%;
		background: url("https://oss.microzuji.com/web/activity/first_month/B1.png") center center/100% 100% no-repeat;
	}

	.hotRentPhone {
		margin-top: -200rpx;
		width: 750rpx;
		height: 500rpx;
		background: url("https://oss.microzuji.com/web/activity/first_month/D1.png") center center/100% 100% no-repeat;
		position: relative;
	}

	.hotRentgGoodThing {
		width: 740rpx;
		height: 500rpx;
		background: url("https://oss.microzuji.com/web/activity/first_month/D4.png") center center/100% 100% no-repeat;
		position: relative;
	}

	.hotRentComputer {
		width: 740rpx;
		height: 500rpx;
		background: url("https://oss.microzuji.com/web/activity/first_month/D5.png") center center/100% 100% no-repeat;
		position: relative;
	}

	.hotRentProduct-box {
		position: absolute;
		left: 90rpx;
		top: 90rpx;
	}

	.hotRentgGoodThing-box,
	.hotRentComputer-box {
		position: absolute;
		right: 90rpx;
		top: 90rpx;
	}

	.hotRentProduct-top {
		padding-top: 17rpx;
		width: 450rpx;
		height: 194rpx;
		background: url("https://oss.microzuji.com/web/activity/first_month/D2.png") center center/100% 100% no-repeat;
	}

	.rentProduct-right {
		width: 240rpx;
		/* border: 1rpx solid red; */
	}

	.rentProduct {
		display: flex;
		height: 150rpx;
		width: 360rpx;
	}

	.product-tit {
		max-width: 200rpx;
		
		font-size: 25rpx;
		line-height: 35rpx;
		color: #434343;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
	}

	.product-tit1 {
		max-width: 140rpx;
		font-size: 22rpx;
		/* line-height: 30rpx; */
		color: #434343;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		word-break: break-all;
	}


	.hotRentList {
		padding: 0 28rpx 0 20rpx;
		width: 100%;
		flex-wrap: wrap;
		display: flex;
	}

	.three-box {
		padding: 0 28rpx 0 20rpx;
		width: 100%;
		flex-wrap: wrap;
		display: flex;
	}

	.hotRentItem {
		height: 420rpx;
		margin-left: 18rpx;
		background: url("https://oss.microzuji.com/web/activity/first_month/D3.png") center center/100% 100% no-repeat;
		width: 30%;
	}

	.common-logo {
		height: 190rpx;
		margin-left: 18rpx;
		width: 30%;
	}
  .left-img{
	  width: 206rpx;height: 136rpx;
  }
	.common-right {
		display: flex;
		flex-direction: column;
		height: 163rpx;
	}
</style>
